<template>
  <div class="process-management">
    <!-- 上部: 新增按钮 -->
    <div class="header-section">
      <button class="add-btn" @click="openDialog('add')">新增工艺</button>
    </div>
    
    <!-- 下部: 工艺列表 -->
    <div class="list-section">
      <h3>工艺列表</h3>
      <table class="process-table">
        <thead>
          <tr>
            <th>工艺名称</th>
            <th>产品代码</th>
            <th>规格</th>
            <th>性能</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- 行点击触发工艺详情查看 -->
          <tr v-for="(item, index) in processList" :key="index" @click="viewDetail(item)">
            <td>{{ item.processName }}</td>
            <td>{{ item.productCode }}</td>
            <td>{{ item.spec }}</td>
            <td>{{ item.performance }}</td>
            <td class="actions">
              <button class="edit-btn" @click.stop="openDialog('edit', item, index)">修改</button>
              <button class="copy-btn" @click.stop="openDialog('copy', item)">复制</button>
              <button class="delete-btn" @click.stop="deleteProcess(index)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <!-- 工艺录入对话框 -->
    <div v-if="dialogVisible" class="dialog-overlay">
      <div class="dialog-content">
        <div class="dialog-header">
          <h3>{{ dialogTitle }}</h3>
          <span class="close-icon" @click="closeDialog">×</span>
        </div>
        
        <div class="process-form-container">
          <div class="top-section">
            <!-- 左侧: 基础信息 -->
            <div class="base-info">
              <h3>基础信息</h3>
              <div class="compact-form">
                <div class="form-row">
                  <label>工艺名称</label>
                  <input type="text" v-model="formData.processName" :readonly="dialogMode === 'view'" placeholder="工艺名称">
                </div>
                <div class="form-row">
                  <label>产品代码</label>
                  <input type="text" v-model="formData.productCode" :readonly="dialogMode === 'view'" placeholder="产品代码">
                </div>
                <div class="form-row">
                  <label>规格</label>
                  <input type="text" v-model="formData.spec" :readonly="dialogMode === 'view'" placeholder="规格">
                </div>
                <div class="form-row">
                  <label>性能</label>
                  <input type="text" v-model="formData.performance" :readonly="dialogMode === 'view'" placeholder="性能">
                </div>
              </div>
            </div>
            
            <!-- 右侧: 频率时间设置 -->
            <div class="freq-settings">
              <h3>频率时间设置</h3>
              <div class="compact-table">
                <table>
                  <thead>
                    <tr>
                      <th>序号</th>
                      <th>频率 (HZ)</th>
                      <th>时间 (分)</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, index) in formData.frequencyTimeList" :key="index">
                      <td>{{ index + 1 }}</td>
                      <td><input type="number" v-model.number="item.frequency" :readonly="dialogMode === 'view'" class="table-input"></td>
                      <td><input type="number" v-model.number="item.time" :readonly="dialogMode === 'view'" class="table-input"></td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="total-time">
                <label>总时间：</label>
                <input type="number" v-model.number="formData.totalTime" :readonly="dialogMode === 'view'" class="compact-input">
                <span>小时</span>
              </div>
            </div>
          </div>
          
          <!-- 下部: 1#和2#线体参数横向排列 -->
          <div class="bottom-section">
            <!-- 1#线体 -->
            <div class="line-section line-1">
              <div class="line-header">
                <h3>1# 线体参数</h3>
              </div>
              
              <div class="params-grid">
                <!-- 左侧: 基本参数 -->
                <div class="params-column">
                  <div class="param-item">
                    <label>磨料重量</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.abrasiveWeight1" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>kg</span>
                    </div>
                  </div>
                  <div class="param-item">
                    <label>工件重量</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.workpieceWeight1" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>kg</span>
                    </div>
                  </div>
                  <div class="param-item">
                    <label>单篮重量</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.singleBasketWeight1" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>kg</span>
                    </div>
                  </div>
                </div>
                
                <!-- 右侧: 时间和位置参数 -->
                <div class="params-column">
                  <div class="param-item">
                    <label>漏料位置</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.leakagePosition1" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>mm</span>
                    </div>
                  </div>
                  <div class="param-item">
                    <label>漏料时间</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.leakageTime1" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>s</span>
                    </div>
                  </div>
                  <div class="param-item">
                    <label>漏件位置</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.leakagePartPosition1" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>mm</span>
                    </div>
                  </div>
                  <div class="param-item">
                    <label>漏件时间</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.leakagePartTime1" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>s</span>
                    </div>
                  </div>
                </div>
                
                <!-- 飞吧参数 -->
                <div class="params-column">
                  <div class="param-item">
                    <label>1#飞吧位置</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.flyBarPosition1" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>s</span>
                    </div>
                  </div>
                  <div class="param-item">
                    <label>2#飞吧位置</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.flyBarPosition12" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>s</span>
                    </div>
                  </div>
                  <div class="param-item">
                    <label>缓启时间</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.softStartTime1" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>s</span>
                    </div>
                  </div>
                  <div class="param-item">
                    <label>缓启频率</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.softStartFrequency1" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>s</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 2#线体 -->
            <div class="line-section line-2">
              <div class="line-header">
                <h3>2# 线体参数</h3>
              </div>
              
              <div class="params-grid">
                <!-- 左侧: 基本参数 -->
                <div class="params-column">
                  <div class="param-item">
                    <label>磨料重量</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.abrasiveWeight2" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>kg</span>
                    </div>
                  </div>
                  <div class="param-item">
                    <label>工件重量</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.workpieceWeight2" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>kg</span>
                    </div>
                  </div>
                  <div class="param-item">
                    <label>单篮重量</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.singleBasketWeight2" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>kg</span>
                    </div>
                  </div>
                </div>
                
                <!-- 右侧: 时间和位置参数 -->
                <div class="params-column">
                  <div class="param-item">
                    <label>漏料位置</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.leakagePosition2" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>mm</span>
                    </div>
                  </div>
                  <div class="param-item">
                    <label>漏料时间</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.leakageTime2" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>s</span>
                    </div>
                  </div>
                  <div class="param-item">
                    <label>漏件位置</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.leakagePartPosition2" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>mm</span>
                    </div>
                  </div>
                  <div class="param-item">
                    <label>漏件时间</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.leakagePartTime2" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>s</span>
                    </div>
                  </div>
                </div>
                
                <!-- 飞吧参数 -->
                <div class="params-column">
                  <div class="param-item">
                    <label>1#飞吧位置</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.flyBarPosition2" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>s</span>
                    </div>
                  </div>
                  <div class="param-item">
                    <label>2#飞吧位置</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.flyBarPosition22" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>s</span>
                    </div>
                  </div>
                  <div class="param-item">
                    <label>缓启时间</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.softStartTime2" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>s</span>
                    </div>
                  </div>
                  <div class="param-item">
                    <label>缓启频率</label>
                    <div class="input-group">
                      <input type="number" v-model.number="formData.softStartFrequency2" :readonly="dialogMode === 'view'" class="compact-input">
                      <span>s</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 对话框底部按钮 -->
        <div class="dialog-footer">
          <button class="save-btn" v-if="dialogMode !== 'view'" @click="saveForm">保存</button>
          <button class="cancel-btn" @click="closeDialog">{{ dialogMode === 'view' ? '关闭' : '取消' }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { ElMessage } from 'element-plus'
export default {
  name: 'ProcessManagementSystem',
  data() {
    return {
      dialogVisible: false,
      dialogMode: 'add',
      formData: this.getDefaultFormData(),
      processList: [
        {
          processName: 'N002BZ253S工艺',
          productCode: 'N002BZ253S',
          spec: 'D23.5 * 2',
          performance: '43M - DF',
          abrasiveWeight1: 200,
          workpieceWeight1: 200,
          singleBasketWeight1: 5,
          leakagePosition1: 80,
          leakageTime1: 15,
          leakagePartPosition1: 60,
          leakagePartTime1: 15,
          abrasiveWeight2: 200,
          workpieceWeight2: 210,
          singleBasketWeight2: 5,
          leakagePosition2: 100,
          leakageTime2: 15,
          leakagePartPosition2: 80,
          leakagePartTime2: 15,
          flyBarPosition1: 1,
          flyBarPosition12: 1,
          softStartTime1: 5,
          softStartFrequency1: 2,
          flyBarPosition2: 5,
          flyBarPosition22: 5,
          softStartTime2: 5,
          softStartFrequency2: 2,
          frequencyTimeList: [
            { frequency: 22, time: 10 },
            { frequency: 28, time: 60 },
            { frequency: 30, time: 120 },
            { frequency: 32, time: 120 },
            { frequency: 34, time: 120 },
            { frequency: 0, time: 0 },
            { frequency: 0, time: 0 },
            { frequency: 0, time: 0 },
            { frequency: 0, time: 0 },
            { frequency: 0, time: 0 }
          ],
          totalTime: 7.17
        }
      ],
      currentIndex: -1
    }
  },
  mounted() {
    this.deal_technology_db("查询","111")    
  },
  computed: {
    dialogTitle() {
      if (this.dialogMode === 'view') {
        return '工艺详情（只读）';
      }
      return {
        'add': '新增工艺',
        'edit': '编辑工艺',
        'copy': '复制工艺'
      }[this.dialogMode]
    },
  },
  methods: {
    //计算总时长
    compute_totaltime(reslut){
      var total_time = 0
      for(let i=0;i<10;i++){
        var name_ = "time" + (i+1)
        total_time += parseInt(reslut[name_])
      }
      return total_time / 60
    },
    //操作数据库
    deal_technology_db(type_option,formData){
      // this.formData = []
      let mes_data_final = []
      mes_data_final.push(type_option)
      if(type_option != "查询"){
        let mes_data = {  
          Name:formData.processName,
          ProductName:formData.productCode,
          GuiGe:formData.spec,
          XinNneng:formData.performance,
          abrasiveWeight1:formData.abrasiveWeight1,
          workpieceWeight1:formData.workpieceWeight1,
          singleBasketWeight1:formData.singleBasketWeight1,
          leakagePosition1:formData.leakagePosition1,
          leakageTime1:formData.leakageTime1,
          leakagePartPosition1:formData.leakagePartPosition1,
          leakagePartTime1:formData.leakagePartTime1,
          flyBarPosition1:formData.flyBarPosition1,
          flyBarPosition12:formData.flyBarPosition12,
          softStartTime1:formData.softStartTime1,
          softStartFrequency1:formData.softStartFrequency1,
          abrasiveWeight2:formData.abrasiveWeight2,
          workpieceWeight2:formData.workpieceWeight2,
          singleBasketWeight2:formData.singleBasketWeight2,
          leakagePosition2:formData.leakagePosition2,
          leakageTime2:formData.leakageTime2,
          leakagePartPosition2:formData.leakagePartPosition2,
          leakagePartTime2:formData.leakagePartTime2,
          flyBarPosition2:formData.flyBarPosition2,
          flyBarPosition22:formData.flyBarPosition22,
          softStartTime2:formData.softStartTime2,
          softStartFrequency2:formData.softStartFrequency2,
          step1:formData.frequencyTimeList[0]["frequency"],
          time1:formData.frequencyTimeList[0]["time"],
          step2:formData.frequencyTimeList[1]["frequency"],
          time2:formData.frequencyTimeList[1]["time"],
          step3:formData.frequencyTimeList[2]["frequency"],
          time3:formData.frequencyTimeList[2]["time"],
          step4:formData.frequencyTimeList[3]["frequency"],
          time4:formData.frequencyTimeList[3]["time"],
          step5:formData.frequencyTimeList[4]["frequency"],
          time5:formData.frequencyTimeList[4]["time"],
          step6:formData.frequencyTimeList[5]["frequency"],
          time6:formData.frequencyTimeList[5]["time"],
          step7:formData.frequencyTimeList[6]["frequency"],
          time7:formData.frequencyTimeList[6]["time"],
          step8:formData.frequencyTimeList[7]["frequency"],
          time8:formData.frequencyTimeList[7]["time"],
          step9:formData.frequencyTimeList[8]["frequency"],
          time9:formData.frequencyTimeList[8]["time"],
          step10:formData.frequencyTimeList[9]["frequency"],
          time10:formData.frequencyTimeList[9]["time"],
          }
        mes_data_final.push(mes_data)
      }else{
        let mes_data = {  
            }
        mes_data_final.push(mes_data)
      }    
      let jsonString_mes_data = JSON.stringify(mes_data_final)
      this.http.get('api/daojiaoGD/get_tech_db',
                        {mes_data:jsonString_mes_data}).then((reslut_) => {
                          var reslut = reslut_["data_all"]
                          if(reslut != "a"){
                            this.processList = []
                            for(let i=0;i<reslut.length;i++){
                              console.log(reslut[i])
                              this.processList.push({
                                  processName: reslut[i]["Name"],
                                  productCode: reslut[i]["ProductName"],
                                  spec: reslut[i]["GuiGe"],
                                  performance: reslut[i]["XinNneng"],
                                  abrasiveWeight1: reslut[i]["abrasiveWeight1"],
                                  workpieceWeight1: reslut[i]["workpieceWeight1"],
                                  singleBasketWeight1: reslut[i]["singleBasketWeight1"],
                                  leakagePosition1: reslut[i]["leakagePosition1"],
                                  leakageTime1: reslut[i]["leakageTime1"],
                                  leakagePartPosition1: reslut[i]["leakagePartPosition1"],
                                  leakagePartTime1: reslut[i]["leakagePartTime1"],
                                  abrasiveWeight2: reslut[i]["abrasiveWeight2"],
                                  workpieceWeight2: reslut[i]["workpieceWeight2"],
                                  singleBasketWeight2: reslut[i]["singleBasketWeight2"],
                                  leakagePosition2: reslut[i]["leakagePosition2"],
                                  leakageTime2: reslut[i]["leakageTime2"],
                                  leakagePartPosition2: reslut[i]["leakagePartPosition2"],
                                  leakagePartTime2: reslut[i]["leakagePartTime2"],
                                  flyBarPosition1: reslut[i]["flyBarPosition1"],
                                  flyBarPosition12: reslut[i]["flyBarPosition12"],
                                  softStartTime1: reslut[i]["softStartTime1"],
                                  softStartFrequency1: reslut[i]["softStartFrequency1"],
                                  flyBarPosition2: reslut[i]["flyBarPosition2"],
                                  flyBarPosition22: reslut[i]["flyBarPosition22"],
                                  softStartTime2: reslut[i]["softStartTime2"],
                                  softStartFrequency2: reslut[i]["softStartFrequency2"],
                                  frequencyTimeList: [
                                    { frequency: reslut[i]["step1"], time: reslut[i]["time1"] },
                                    { frequency: reslut[i]["step2"], time: reslut[i]["time2"] },
                                    { frequency: reslut[i]["step3"], time: reslut[i]["time3"] },
                                    { frequency: reslut[i]["step4"], time: reslut[i]["time4"] },
                                    { frequency: reslut[i]["step5"], time: reslut[i]["time5"] },
                                    { frequency: reslut[i]["step6"], time: reslut[i]["time6"] },
                                    { frequency: reslut[i]["step7"], time: reslut[i]["time7"] },
                                    { frequency: reslut[i]["step8"], time: reslut[i]["time8"] },
                                    { frequency: reslut[i]["step9"], time: reslut[i]["time9"] },
                                    { frequency: reslut[i]["step10"], time: reslut[i]["time10"] }
                                  ],
                                  totalTime: this.compute_totaltime(reslut[i]).toFixed(2)
                              })
                            }
                          }                          
                          ElMessage.success(reslut_["type"])
                          return reslut[0]
                      }).catch((error) => {
                          console.log("失败",error)
                          return "未更新"
                      });      
    },
    getDefaultFormData() {
      return {
        processName: '',
        productCode: '',
        spec: '',
        performance: '',
        abrasiveWeight1: 200,
        workpieceWeight1: 200,
        singleBasketWeight1: 5,
        leakagePosition1: 80,
        leakageTime1: 15,
        leakagePartPosition1: 60,
        leakagePartTime1: 15,
        abrasiveWeight2: 200,
        workpieceWeight2: 210,
        singleBasketWeight2: 5,
        leakagePosition2: 100,
        leakageTime2: 15,
        leakagePartPosition2: 80,
        leakagePartTime2: 15,
        flyBarPosition1: 1,
        flyBarPosition12: 1,
        softStartTime1: 5,
        softStartFrequency1: 2,
        flyBarPosition2: 5,
        flyBarPosition22: 5,
        softStartTime2: 5,
        softStartFrequency2: 2,
        frequencyTimeList: Array(10).fill().map(() => ({ frequency: 0, time: 0 })),
        totalTime: 0
      }
    },
    openDialog(mode, processData = null, index = -1) {
      this.dialogMode = mode
      this.currentIndex = index
      console.log("121221",mode)
      console.log("333333",processData)
      
      if (processData) {
        // 深拷贝工艺数据
        this.formData = JSON.parse(JSON.stringify(processData))
        
        if (mode === 'copy') {
          this.formData.processName += ' - 副本'
        }
      } 
      else {
        this.formData = this.getDefaultFormData()        
      }      
      this.dialogVisible = true
    },
    get_dialog_data(formData){
      console.log("获取数据")
      this.processList.push({
        Name:formData.processName,
          ProductName:formData.productCode,
          GuiGe:formData.spec,
          XinNneng:formData.performance,
          abrasiveWeight1:formData.abrasiveWeight1,
          workpieceWeight1:formData.workpieceWeight1,
          singleBasketWeight1:formData.singleBasketWeight1,
          leakagePosition1:formData.leakagePosition1,
          leakageTime1:formData.leakageTime1,
          leakagePartPosition1:formData.leakagePartPosition1,
          leakagePartTime1:formData.leakagePartTime1,
          flyBarPosition1:formData.flyBarPosition1,
          flyBarPosition12:formData.flyBarPosition12,
          softStartTime1:formData.softStartTime1,
          softStartFrequency1:formData.softStartFrequency1,
          abrasiveWeight2:formData.abrasiveWeight2,
          workpieceWeight2:formData.workpieceWeight2,
          singleBasketWeight2:formData.singleBasketWeight2,
          leakagePosition2:formData.leakagePosition2,
          leakageTime2:formData.leakageTime2,
          leakagePartPosition2:formData.leakagePartPosition2,
          leakagePartTime2:formData.leakagePartTime2,
          flyBarPosition2:formData.flyBarPosition2,
          flyBarPosition22:formData.flyBarPosition22,
          softStartTime2:formData.softStartTime2,
          softStartFrequency2:formData.softStartFrequency2,
          step1:formData.frequencyTimeList[0]["frequency"],
          time1:formData.frequencyTimeList[0]["time"],
          step2:formData.frequencyTimeList[1]["frequency"],
          time2:formData.frequencyTimeList[1]["time"],
          step3:formData.frequencyTimeList[2]["frequency"],
          time3:formData.frequencyTimeList[2]["time"],
          step4:formData.frequencyTimeList[3]["frequency"],
          time4:formData.frequencyTimeList[3]["time"],
          step5:formData.frequencyTimeList[4]["frequency"],
          time5:formData.frequencyTimeList[4]["time"],
          step6:formData.frequencyTimeList[5]["frequency"],
          time6:formData.frequencyTimeList[5]["time"],
          step7:formData.frequencyTimeList[6]["frequency"],
          time7:formData.frequencyTimeList[6]["time"],
          step8:formData.frequencyTimeList[7]["frequency"],
          time8:formData.frequencyTimeList[7]["time"],
          step9:formData.frequencyTimeList[8]["frequency"],
          time9:formData.frequencyTimeList[8]["time"],
          step10:formData.frequencyTimeList[9]["frequency"],
          time10:formData.frequencyTimeList[9]["time"],
      })  
          
    },
    viewDetail(processData) {
      this.openDialog('view', processData)
    },
    closeDialog() {
      this.dialogVisible = false
      this.formData = this.getDefaultFormData()
      this.currentIndex = -1
    },
    saveForm() {      
      if (this.dialogMode === 'add') {
        // this.processList.push(this.formData)
        this.deal_technology_db("新增",this.formData)
      } else if (this.dialogMode === 'edit' && this.currentIndex !== -1) {
        this.processList.splice(this.currentIndex, 1, this.formData);
        this.deal_technology_db("编辑",this.formData)
      } else if (this.dialogMode === 'copy') {
        // this.processList.push(this.formData)
        this.deal_technology_db("新增",this.formData)
      }      
      this.closeDialog()
    },
    deleteProcess(index) {
      if (confirm('确定要删除此工艺吗？')) {
        this.deal_technology_db("删除",this.processList[index])
        this.processList.splice(index, 1)
      }
    },
  }
}
</script>

<style scoped>
.process-management {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.header-section {
  margin-bottom: 20px;
}

.add-btn {
  padding: 10px 15px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.add-btn:hover {
  background-color: #2980b9;
}

.list-section {
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  border: 1px solid #e1e5eb;
}

.process-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-size: 14px;
}
.process-table th{
  padding: 12px 15px;
  text-align: center;
  border-bottom: 1px solid #eee;
  color: #030303;
}
.process-table td {
  padding: 12px 15px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.process-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  text-align: center;
}

/* 行悬停效果 */
.process-table tbody tr {
  cursor: pointer;
  transition: background-color 0.2s;
}

.process-table tbody tr:hover {
  background-color: #f1f5f9;
}

/* 操作列按钮不触发行点击 */
.actions {
  display: flex;
  gap: 10px;
  margin-left: 30%;
}

.edit-btn, .copy-btn, .delete-btn {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.edit-btn {
  background-color: #5cb85c;
  color: white;
}

.edit-btn:hover {
  background-color: #4cae4c;
}

.copy-btn {
  background-color: #5bc0de;
  color: white;
}

.copy-btn:hover {
  background-color: #46b8da;
}

.delete-btn {
  background-color: #d9534f;
  color: white;
}

.delete-btn:hover {
  background-color: #d43f3a;
}

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding-bottom: 20px;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #3498db;
  color: white;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.close-icon {
  cursor: pointer;
  font-size: 24px;
  font-weight: bold;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.save-btn, .cancel-btn {
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.save-btn {
  background: #3498db;
  color: white;
}

.save-btn:hover {
  background: #2980b9;
}

.cancel-btn {
  background: #95a5a6;
  color: white;
}

.cancel-btn:hover {
  background: #7f8c8d;
}

.process-form-container {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: #f5f7fa;
}

/* 只读状态下的输入框样式 */
input:read-only {
  background-color: #f8f9fa;
  color: #495057;
  cursor: not-allowed;
  border: 1px solid #dee2e6;
}

input:read-only:focus {
  outline: none;
  border-color: #dee2e6;
}

.top-section {
  display: flex;
  gap: 20px;
}

.base-info, .freq-settings {
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  border: 1px solid #e1e5eb;
}

.base-info {
  flex: 1;
  min-width: 250px;
}

.freq-settings {
  flex: 2;
  display: flex;
  flex-direction: column;
}

h3 {
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #3498db;
  color: #2c3e50;
  font-size: 16px;
}

.compact-form .form-row {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.compact-form label {
  display: inline-block;
  width: 70px;
  font-size: 13px;
  color: #555;
}

.compact-form input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  min-height: 32px;
}

.compact-table {
  flex: 1;
  overflow-y: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table th {
  background-color: #3498db;
  color: white;
  padding: 6px;
  font-weight: 500;
  position: sticky;
  top: 0;
}

table td {
  padding: 6px;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.table-input {
  width: 100px;
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 3px;
  text-align: center;
  font-size: 13px;
}

.total-time {
  display: flex;
  align-items: center;
  margin-top: 8px;
  font-size: 14px;
}

.total-time label {
  margin-right: 8px;
}

.total-time input {
  width: 80px;
  padding: 6px;
  margin-right: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.bottom-section {
  display: flex;
  gap: 15px;
}

.line-section {
  flex: 1;
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  border: 1px solid #e1e5eb;
}

.line-1 {
  border-left: 3px solid #e74c3c;
}

.line-2 {
  border-left: 3px solid #27ae60;
}

.line-header {
  margin-bottom: 8px;
}

.params-grid {
  display: flex;
  gap: 10px;
}

.params-column {
  flex: 1;
  min-width: 100px;
}

.param-item {
  margin-bottom: 8px;
  text-align: left;
}

.param-item label {
  display: block;
  font-size: 12px;
  color: #555;
  margin-bottom: 4px;
}

.input-group {
  display: flex;
  justify-content: flex-start;
}

.input-group input {
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  min-height: 32px;
  width: 100px;
}

.input-group span {
  margin-left: 6px;
  font-size: 12px;
  color: #777;
  min-width: 25px;
  display: flex;
  align-items: center;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .params-grid {
    flex-wrap: wrap;
  }
  
  .params-column {
    min-width: 50%;
  }
}

@media (max-width: 900px) {
  .top-section {
    flex-direction: column;
  }
  
  .bottom-section {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .actions {
    flex-direction: column;
    gap: 5px;
  }
  
  .actions button {
    width: 100%;
  }
  
  .dialog-content {
    width: 95%;
    max-height: 95vh;
  }
  
  .process-form-container {
    padding: 10px;
  }
  
  .line-section {
    padding: 8px;
  }
  
  .params-grid {
    flex-direction: column;
    gap: 5px;
  }
  
  .params-column {
    min-width: 100%;
  }
}
</style>
